<template>
	<div class="detail-group">
		<div class="detail-title">
			<p class="title-p">
				{{detailTitle}}
			</p>
		</div>
		<div class="detail-group">
			<div class="group-l" @click="vdShare()">
				<div class="g-button">
					<div class="g-button-l">
						<img class='g-b-img' src='../../../assets/images/vd_wb.svg' />
					</div>
					<div class="g-button-r">
						<p class="g-r-p">
							转发微博
						</p>
					</div>
				</div>
			</div>
			<div class="group-c" @click="vdShare()">
				<div class="g-button">
					<div class="g-button-l">
						<img class='g-b-img' src='../../../assets/images/vd_pyq.svg' />
					</div>
					<div class="g-button-r">
						<p class="g-r-p">
							朋友圈
						</p>
					</div>
				</div>
			</div>
			<div class="group-r" @click="vdShare()">
				<div class="g-button">
					<div class="g-button-l">
						<img class='g-b-img' src='../../../assets/images/vd_wx.svg' />
					</div>
					<div class="g-button-r">
						<p class="g-r-p">
							分享微信
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'detail-title',
		props: {
			detailTitle: String
		},
		methods: {
			vdShare () {
				this.$emit('shareChange')
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~stylus/minxins.styl'
	.detail-group
		background:#fff
		.detail-title
			padding:2px 20px
			.title-p
				font-size:36px
				font-weight:bold
				line-height:50px
				margin-bottom:8px
				-webkit-line-clamp: 2
				textClamp()
		.detail-group
			height:120px
			display:flex
			flex-ection:row
			.g-button
				width:216px
				background:#fff
				border:2px #E0E0E0 solid
				border-radius:40px
				flexRow()
				.g-button-l
					width:40%
					height:70px
					padding:4px 0px
					alignItemCenter()
					.g-b-img
						width:60px
				.g-button-r
					width:60%
					height:70px
					display:flex
					align-items:center
					padding:4px 8px
					.g-r-p
						font-size:28px
			.group-l
				width:250px
				height:100%
				alignItemCenter()
			.group-c
				width:250px
				height:100%
				alignItemCenter()
			.group-r
				width:250px
				height:100%
				alignItemCenter()
</style>
